<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>打气球的游戏balloon</title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		html,body{height:100%;overflow: hidden;}
		.balloon{
			position: absolute;
			width: 150px;
			height: 150px;
			background-color: lightblue;
			border-radius: 150px 150px 65px 150px;
			transform: rotate(45deg);
			box-shadow: -8px -8px 80px red inset;
			cursor: pointer;
			
		}
		.balloon:after{
			content: "";
			left: 135px;
			bottom: 0;
			position: absolute;
			border: 8px solid transparent;
			border-right-color:lightcoral;
			transform: rotate(45deg);
			border-radius: 50%;
		}
	</style>
	<body>
		
		
		<script>
			var wHeight=window.innerHeight;
			var wWidth=window.innerWidth;
			var bz=150;
			var timer;
			addBalloons(10);
			timer=setInterval(bmove, 1000/60);
			
			document.body.addEventListener("click", function(e){
				if(e.target.className == "balloon"){
					this.removeChild(e.target);
					addBalloons(1);
				}
			})
			
			function addBalloons(num){
				var fragment=document.createDocumentFragment();
				for(var i=0;i<num;i++){
					var divDOM = document.createElement("div");
					divDOM.className="balloon";
					ranX=~~(Math.random()*wWidth)-bz;
					ranX=Math.max(0, ranX);  //边界限制 防止为负
					divDOM.style.left=ranX+"px";
					divDOM.style.top=wHeight-bz+"px";
					fragment.appendChild(divDOM);
				}
				document.body.appendChild(fragment);
			}
			
			function bmove(){
				var balllons=document.querySelectorAll(".balloon");
				var len=balllons.length;
				for(var j=0; j<len; j++){
						balllons[j].style.top=balllons[j].offsetTop-1+"px";
				}
			}
			
			
			
		</script>
	</body>
</html>
